<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../layui/css/layui.css">

</head>
<body>
<div class="layui-form-item">
    <label class="layui-form-label">客户</label>
    <div class="layui-input-block">
        <input id="client" type="text" name="client" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">销售员</label>
    <div class="layui-input-block">
        <input id="user" type="text" name="user" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">收货地址</label>
    <div class="layui-input-block">
        <input type="text" name="address" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
</div>
<table id="userTable" lay-filter="test"></table>
<script type="text/html" id="barDemo1">
    <input class="layui-input" id="number">
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="add">增加</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<button id="btn1" class="layui-btn">添加区域</button>
<button id="btn2" class="layui-btn">出库</button>

</body>
<script src="../layui/layui.js"></script>
<script>
    //Demo
    layui.use(['table','jquery','form'], function(){
        var table = layui.table;
        let $=layui.$;
        let form=layui.form;


        //第一个实例
        table.render({
            id:'user',
            elem: '#userTable'
            ,url: '/ssm/market/market2' //数据接口
            // ,page: true //开启分页
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "count": res.length, //解析数据
                    "data": res
                };
            }
            ,cols: [[ //表头
                {field: 'm_name', title: '商品名称'}
                ,{field: 'm_factory', title: '厂家',  sort: true}
                ,{field: 'm_number', title: '出库数量'}
                ,{field: 'm_sole', title: '建议销售价'}
                ,{fixed: 'right',align: 'center',toolbar: '#barDemo1',title: '添加出库数'}
                ,{fixed: 'right', align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]]
        });
        table.on('tool(test)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent === 'add') {
                let val = tr.find("#number").val();
                $.ajax({
                    type: "GET",
                    url: "/ssm/market/addNumber?id=" + data.m_id + "&number=" + val + "",
                    dataType: "json",
                    success: function (objs) {
                        table.reload('user', {
                            url: '/ssm/market/market2'
                            ,where: {} //设定异步数据接口的额外参数
                            //,height: 300
                        });
                    }
                });
            }else if(layEvent==='del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        type: "GET",
                        url: "/ssm/market/del?id=" + data.m_id +"",
                        dataType: "json",
                        success: function (objs) {
                            table.reload('user', {
                                url: '/ssm/market/market2'
                                ,where: {} //设定异步数据接口的额外参数
                                //,height: 300
                            });
                        }
                    });
                });
            }
        });
        let btn1=document.getElementById("btn1");
        let btn2=document.getElementById("btn2");
        let btn3=document.getElementById("btn3");
        btn1.onclick=function(){
            layer.open({
                type:2
                ,title: '添加商品'
                ,content: 'addsale.html'
                ,anim:4
                ,area:['600px','400px']
                ,btn:['确定','取消']
                ,yes: function(index, layero){
                    table.reload('user', {
                        url: '/ssm/market/market2'
                        ,where: {} //设定异步数据接口的额外参数
                        //,height: 300
                    });
                }
                ,success: function(layero, index){
                    table.reload('user', {
                        url: '/ssm/market/market2'
                        ,where: {} //设定异步数据接口的额外参数
                        //,height: 300
                    });

                }
            });
        }
        btn2.onclick=function () {
            let client=document.getElementById("client").value;
            let user=document.getElementById("user").value;
            $.ajax({
                type: "GET",
                url: "/ssm/market/out?client="+client+"&user="+user+"",
                dataType: "json",
                success: function (objs) {
                    table.reload('user', {
                        url: '/ssm/market/market2'
                        ,where: {} //设定异步数据接口的额外参数
                        //,height: 300
                    });
                }
            });
        }



    });
</script>
</html>